<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <!-- 商品组 列表 -->
    <div class="u_goodslist" v-if="datas.preview_color && (!datas.style_set || datas.style_set == '1')">

      <div class="u_goodslist_two" v-if="datas.sort_style.choose_icon == 1">
        <!-- 大图样式 -->
        <!-- 大图失效的 两种样式 是一样-->
        <div v-if="datas.list.length <= 0 && datas.goods_type === 'rush'" style="width: 100%;height: 150px;line-height: 50px;text-align: center;font-size: 18px"> <a-empty /> </div>
        <div class="u_goodslist_two_child big" v-for="(item, index) in datas.goods_type === 'rush'?datas.list:2" :key="index">
          <div class="Failure" v-if="datas.disable_good != 0" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已失效</div>
          </div>
          <img :src="item.thumb || emptyImage" alt="" class="goodsImg">
          <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '50px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
            <!-- 限时抢购 -->
            <img src="../../../resource/images/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
            <!-- 包邮 -->
            <img src="../../../resource/images/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
            <!-- 热销 -->
            <img src="../../../resource/images/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
            <!-- 新上 -->
            <img src="../../../resource/images/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
            <!-- 推荐 -->
            <img src="../../../resource/images/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
            <!-- 自定义 -->
            <img :src="datas.good_tag.image" style="width:100%" v-if="datas.good_tag.choose_icon ==7" alt="">
          </div>
          <div class="twoChild_bottom">
            <div class="twoChild_top time-box">
              <i class="iconfont icon-ht_qd_miaosha"></i>
              <div style="margin-left:7px;margin-right:3px;">02</div>天<div style="margin-left:3px;margin-right:3px;">02</div>:<div style="margin-left:3px;margin-right:3px;">02</div>:<div style="margin-left:3px;margin-right:3px;">02</div>
            </div>
            <div class="Child_title" style="color:#fff;" v-if="datas.content_list.includes('1')">
              {{item.title || '商品标题'}}
            </div>
            <div class="twoChild_line">
              <div class="posRed" style="width: 40%">库存仅剩254件</div>
            </div>
            <div class="Child_other">
              <div class="oneChild_sales" style="color:#fff;" v-if="datas.content_list.includes('7')">销量 8888</div>
              <div class="oneChild_activity" style="color:#fff;"
                   v-if="!datas.content_list.includes('5') && datas.content_list.includes('6')">赠送xx积分
              </div>
              <div class="oneChild_activity" style="color:#fff;" v-if="datas.content_list.includes('5')">赠送xx爱心值</div>
            </div>
            <!--<div class="Child_member_price" v-if="datas.content_list.includes('4')">会员价 XX.00</div>-->
            <div class="Child_price">
              <div class="Child_now_price"><span v-if="datas.content_list.includes('3')"><em>￥</em> {{item.price || '888.00'}}</span> <em
                  class="oneChild_original_price" v-if="datas.content_list.includes('2')">￥{{item.market_price || '8888.00'}}</em></div>
              <div class="Child_buyBtn">
                <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                  <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                  <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                  <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_three" v-if="datas.sort_style.choose_icon == 2">
        <div v-if="datas.list.length <= 0 && datas.goods_type === 'rush'" style="width: 100%;height: 150px;line-height: 50px;text-align: center;font-size: 18px"> <a-empty /> </div>
        <!-- 双排样式 -->
        <div class="u_goodslist_three_child " v-for="(item, index) in datas.goods_type === 'rush'?datas.list:3" :key="index">
          <div class="Failure" v-if="datas.disable_good != 0" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已失效</div>
          </div>
          <div class="threeChild_top">
            <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '35px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
              <!-- 限时抢购 -->
              <img src="../../../resource/images/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
              <!-- 包邮 -->
              <img src="../../../resource/images/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
              <!-- 热销 -->
              <img src="../../../resource/images/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
              <!-- 新上 -->
              <img src="../../../resource/images/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
              <!-- 推荐 -->
              <img src="../../../resource/images/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
              <!-- 自定义 -->
              <img :src="datas.good_tag.image" style="width:100%" v-if="datas.good_tag.choose_icon ==7" alt="">
            </div>
            <img :src="item.thumb || emptyImage" alt="" class="goodsImg">
            <div class="twoChild_topPos time-box">
              <i class="iconfont icon-ht_qd_miaosha"></i>
              <div>02</div>天<div >02</div>:<div >02</div>:<div style="margin-right:5px;">02</div>
            </div>
          </div>
          <div class="threeChild_b">
            <div class="Child_title" v-if="datas.content_list.includes('1')">
              {{item.title || '商品标题'}}
            </div>
            <div class="Child_other">
               <div class="oneChild_sales" v-if="datas.content_list.includes('7')">销量 8888</div>
              <div class="twoChild_line">
                <div class="posRed" style="width:40%">仅剩254件</div>
              </div>
              <div class="oneChild_activity"
                   v-if="!datas.content_list.includes('5') && datas.content_list.includes('6')">赠送xx积分
              </div>
              <div class="oneChild_activity" v-if="datas.content_list.includes('5')">赠送xx爱心值</div>
            </div>
            <!-- <div class="Child_member_price" v-if="datas.content_list.includes('4')">会员价 500.00</div> -->
            <div class="Child_price">
              <div class="Child_now_price" v-if="datas.content_list.includes('3')"><em>￥</em> {{item.price || '888.00'}}</div>
              <div class="Child_now_price" v-if="!datas.content_list.includes('3')"></div>
              <div class="Child_buyBtn">
                <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                  <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                  <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                  <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                </div>
              </div>
            </div>
            <div class="oneChild_original_price" v-if="datas.content_list.includes('2')">￥{{item.market_price || '8888.00'}}</div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_one" v-if="datas.sort_style.choose_icon == 3">
        <div v-if="datas.list.length <= 0 && datas.goods_type === 'rush'" style="width: 100%;height: 150px;line-height: 50px;text-align: center;font-size: 18px"> <a-empty /> </div>
        <!-- 横排样式 -->
        <div class="u_goodslist_one_child " v-for="(item, index) in datas.goods_type === 'rush'?datas.list:3" :key="index">
          <div class="Failure" v-if="datas.disable_good != 0" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已失效</div>
          </div>
          <div class="oneChild_left">
            <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '30px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
              <!-- 限时抢购 -->
              <img src="../../../resource/images/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
              <!-- 包邮 -->
              <img src="../../../resource/images/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
              <!-- 热销 -->
              <img src="../../../resource/images/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
              <!-- 新上 -->
              <img src="../../../resource/images/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
              <!-- 推荐 -->
              <img src="../../../resource/images/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
              <!-- 自定义 -->
              <img :src="datas.good_tag.image" style="width:100%" v-if="datas.good_tag.choose_icon ==7" alt="">
            </div>
            <img :src="item.thumb || emptyImage" alt="">
            <div class="twoChild_topPos time-box">
              <i class="iconfont icon-ht_qd_miaosha"></i>
              <div>02</div>天<div >02</div>:<div >02</div>:<div style="margin-right:5px;">02</div>
            </div>
          </div>
          <div class="oneChild_right">
            <div class="oneChild_r_flextop">
              <div class="Child_title" v-if="datas.content_list.includes('1')">
                {{item.title || '商品标题'}}
              </div>
              <div class="Child_other">
                 <div class="oneChild_sales" v-if="datas.content_list.includes('7')">销量 8888</div>
                <div class="twoChild_line">
                  <div class="posRed" style="width:40%">仅剩254件</div>
                </div>
                <div class="oneChild_activity"
                     v-if="!datas.content_list.includes('5') && datas.content_list.includes('6')">赠送xx积分
                </div>
                <div class="oneChild_activity" v-if="datas.content_list.includes('5')">赠送xx爱心值</div>
              </div>
            </div>
            <div class="oneChild_r_flexbottom">
              <!-- <div class="Child_member_price" v-if="datas.content_list.includes('4')">会员价 500.00</div> -->
              <div class="Child_price">
                <div class="Child_now_price" v-if="datas.content_list.includes('3')"><em>￥</em> {{item.price || '888.00'}}</div>
                <div class="Child_now_price" v-if="!datas.content_list.includes('3')"></div>
                <div class="Child_buyBtn">
                  <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                    <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                    <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                    <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                  </div>
                </div>
              </div>
              <div class="oneChild_original_price" v-if="datas.content_list.includes('2')">￥{{item.market_price || '8888.00'}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_four" v-if="datas.sort_style.choose_icon == 4">
        <div v-if="datas.list.length <= 0 && datas.goods_type === 'rush'" style="width: 100%;height: 150px;line-height: 50px;text-align: center;font-size: 18px"> <a-empty /> </div>
        <!-- 三排排序样式 -->
        <div class="u_goodslist_four_child " v-for="(item, index) in datas.goods_type === 'rush'?datas.list:5" :key="index">
          <div class="Failure" v-if="datas.disable_good != 0" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已失效</div>
          </div>
          <div class="threeChild_top">
            <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '25px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
              <!-- 限时抢购 -->
              <img src="../../../resource/images/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
              <!-- 包邮 -->
              <img src="../../../resource/images/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
              <!-- 热销 -->
              <img src="../../../resource/images/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
              <!-- 新上 -->
              <img src="../../../resource/images/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
              <!-- 推荐 -->
              <img src="../../../resource/images/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
              <!-- 自定义 -->
              <img :src="datas.good_tag.image" style="width:100%" v-if="datas.good_tag.choose_icon ==7" alt="">
            </div>
            <img :src="item.thumb || emptyImage" alt="" class="goodsImg">
            <div class="twoChild_topPosThr time-box">
              <i class="iconfont icon-ht_qd_miaosha"></i>
              <div>02</div>天<div >02</div>:<div >02</div>:<div style="margin-right:5px;">02</div>
            </div>
          </div>
          <div class="threeChild_b">
            <div class="Child_title" v-if="datas.content_list.includes('1')">
              {{item.title || '商品标题'}}
            </div>
            <div class="Child_other">
              <div class="oneChild_sales" v-if="!datas.content_list.includes('5') && datas.content_list.includes('6')">
                赠送xx积分
              </div>
              <div class="oneChild_sales" v-if="datas.content_list.includes('5')">赠送xx爱心值</div>
              <div class="oneChild_activity" v-if="datas.content_list.includes('7')">销量 8888</div>
              <div class="twoChild_line">
                <div class="posRed" style="width:40%;border-radius:10px;">254件</div>
              </div>
            </div>
            <!-- <div class="Child_member_price" v-if="datas.content_list.includes('4')">会员价 500.00</div> -->
            <div class="Child_price">
              <div class="Child_now_price" v-if="datas.content_list.includes('3')"><em>￥</em> {{item.price || '888.00'}}</div>
              <div class="Child_now_price" v-if="!datas.content_list.includes('3')"></div>
              <div class="Child_buyBtn" v-if="datas.button_type != 1 && datas.button_type!=2">
                <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                  <!-- 三排没有样式1、样式2的购买按钮 -->
                  <!-- <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template> -->
                  <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                  <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                </div>
              </div>
            </div>
            <div class="oneChild_original_price" v-if="datas.content_list.includes('2')">￥{{item.market_price || '8888.00'}}</div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_four  u_goodslist_five" v-if="datas.sort_style.choose_icon == 5">
        <div v-if="datas.list.length <= 0 && datas.goods_type === 'rush'" style="width: 100%;height: 150px;line-height: 50px;text-align: center;font-size: 18px"> <a-empty /> </div>
        <!-- 三排滑动样式 -->
        <div class="u_goodslist_four_child u_goodslist_five_child" v-for="(item, index) in datas.goods_type === 'rush'?datas.list:5" :key="index">
          <div class="Failure" v-if="datas.disable_good != 0" :class="[datas.disable_good == 1?'failure_cover':'']">
            <div class="Failure_text">已失效</div>
          </div>
          <div class="threeChild_top">
            <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '25px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
              <!-- 限时抢购 -->
              <img src="../../../resource/images/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
              <!-- 包邮 -->
              <img src="../../../resource/images/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
              <!-- 热销 -->
              <img src="../../../resource/images/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
              <!-- 新上 -->
              <img src="../../../resource/images/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
              <!-- 推荐 -->
              <img src="../../../resource/images/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
              <!-- 自定义 -->
              <img :src="datas.good_tag.image" style="width:100%" v-if="datas.good_tag.choose_icon ==7" alt="">
            </div>
            <img :src="item.thumb || emptyImage" alt="" class="goodsImg">
            <div class="twoChild_topPosThr time-box">
              <i class="iconfont icon-ht_qd_miaosha"></i>
              <div>02</div>天<div >02</div>:<div >02</div>:<div style="margin-right:5px;">02</div>
            </div>
          </div>
          <div class="threeChild_b">
            <div class="Child_title" v-if="datas.content_list.includes('1')">
              {{item.title || '商品标题'}}
            </div>
            <div class="Child_other">
              <div class="oneChild_sales" v-if="!datas.content_list.includes('5') && datas.content_list.includes('6')">
                赠送xx积分
              </div>
              <div class="oneChild_sales" v-if="datas.content_list.includes('5')">赠送xx爱心值</div>
               <div class="oneChild_activity" v-if="datas.content_list.includes('7')">销量 8888</div>
              <div class="twoChild_line">
                <div class="posRed" style="width:40%;border-radius:10px;">254件</div>
              </div>
            </div>
            <!-- <div class="Child_member_price" v-if="datas.content_list.includes('4')">会员价 500.00</div> -->
            <div class="Child_price">
              <div class="Child_now_price" v-if="datas.content_list.includes('3')"><em>￥</em> {{item.price || '888.00'}}</div>
              <div class="Child_now_price" v-if="!datas.content_list.includes('3')"></div>
              <div class="Child_buyBtn" v-if="datas.button_type != 1 && datas.button_type!=2">
                <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                  <!-- 三排没有样式1、样式2的购买按钮 -->
                  <!-- <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template> -->
                  <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                  <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                </div>
              </div>
            </div>
            <div class="oneChild_original_price" v-if="datas.content_list.includes('2')">￥{{item.market_price || '8888.00'}}</div>
          </div>
        </div>
      </div>

      <div class="u_goodslist_six" v-if="datas.sort_style.choose_icon == 6">
        <div v-if="datas.list.length <= 0 && datas.goods_type === 'rush'" style="width: 100%;height: 150px;line-height: 50px;text-align: center;font-size: 18px"> <a-empty /> </div>
        <!-- 一大两小 -->
        <template v-for="(item, index) in datas.goods_type === 'rush'?datas.list:3">
          <div class="u_goodslist_two" style="margin:5px;" v-if="index % 3 == 0">
            <!-- 大图样式 -->
            <div class="u_goodslist_two_child ">
              <div class="Failure" v-if="datas.disable_good != 0" :class="[datas.disable_good == 1?'failure_cover':'']">
                <div class="Failure_text">已失效</div>
              </div>
              <img :src="item.thumb || emptyImage" alt="" class="goodsImg">
              <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '50px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
                <!-- 限时抢购 -->
                <img src="../../../resource/images/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
                <!-- 包邮 -->
                <img src="../../../resource/images/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
                <!-- 热销 -->
                <img src="../../../resource/images/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
                <!-- 新上 -->
                <img src="../../../resource/images/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
                <!-- 推荐 -->
                <img src="../../../resource/images/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
                <!-- 自定义 -->
                <img :src="datas.good_tag.image" style="width:100%" v-if="datas.good_tag.choose_icon ==7" alt="">

              </div>
              <div class="twoChild_bottom">
                <div class="twoChild_top time-box">
                  <i class="iconfont icon-ht_qd_miaosha"></i>
                  <div style="margin-left:7px;margin-right:3px;">02</div>天<div style="margin-left:3px;margin-right:3px;">02</div>:<div style="margin-left:3px;margin-right:3px;">02</div>:<div style="margin-left:3px;margin-right:3px;">02</div>
                </div>
                <div class="Child_title" style="color:#fff;" v-if="datas.content_list.includes('1')">
                  {{item.title || '商品标题'}}
                </div>
                <div class="Child_other">
                   <div class="oneChild_sales" style="color:#fff;" v-if="datas.content_list.includes('7')">销量 8888</div>
                  <div class="twoChild_line">
                    <div class="posRed" style="width:40%;border-radius:10px;">仅剩254件</div>
                  </div>
                  <div class="oneChild_activity" style="color:#fff;"
                       v-if="!datas.content_list.includes('5') && datas.content_list.includes('6')">赠送xx积分
                  </div>
                  <div class="oneChild_activity" style="color:#fff;" v-if="datas.content_list.includes('5')">赠送xx爱心值
                  </div>
                </div>
                <!--<div class="Child_member_price" v-if="datas.content_list.includes('4')">会员价 500.00</div>-->
                <div class="Child_price">
                  <div class="Child_now_price"><span v-if="datas.content_list.includes('3')"><em>￥</em> {{item.price || '888.00'}}</span> <em
                      class="oneChild_original_price" v-if="datas.content_list.includes('2')">￥{{item.market_price || '8888.00'}}</em></div>
                  <div class="Child_buyBtn">
                    <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                      <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                      <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                      <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="u_goodslist_three" v-if="index % 3 != 0">
            <!-- 双排样式 -->
            <div class="u_goodslist_three_child">
              <div class="Failure" v-if="datas.disable_good != 0" :class="[datas.disable_good == 1?'failure_cover':'']">
                <div class="Failure_text">已失效</div>
              </div>
              <div class="threeChild_top">
                <div class="good_Attributes" :style="{width: datas.good_tag.choose_icon ==7? '35px':'',height: datas.good_tag.choose_icon ==7? 'auto':''}">
                  <!-- 限时抢购 -->
                  <img src="../../../resource/images/xianshiqianggou@2x.png" v-if="datas.good_tag.choose_icon ==5" alt="">
                  <!-- 包邮 -->
                  <img src="../../../resource/images/baoyou@2x.png" v-if="datas.good_tag.choose_icon ==4" alt="">
                  <!-- 热销 -->
                  <img src="../../../resource/images/hot@2x.png" v-if="datas.good_tag.choose_icon ==2" alt="">
                  <!-- 新上 -->
                  <img src="../../../resource/images/new@2x.png" v-if="datas.good_tag.choose_icon ==3" alt="">
                  <!-- 推荐 -->
                  <img src="../../../resource/images/recommend@2x.png" v-if="datas.good_tag.choose_icon ==1" alt="">
                  <!-- 自定义 -->
                  <img :src="item.thumb || emptyImage" style="width:100%" v-if="datas.good_tag.choose_icon ==7" alt="">
                </div>
                <img :src="item.thumb || emptyImage" alt="" class="goodsImg">
                <div class="twoChild_topPos time-box">
                  <i class="iconfont icon-ht_qd_miaosha"></i>
                  <div>02</div>天<div>02</div>:<div>02</div>:<div style="margin-right:5px;">02</div>
                </div>
              </div>
              <div class="threeChild_b">
                <div class="Child_title" v-if="datas.content_list.includes('1')">
                  {{item.title || '商品标题'}}
                </div>
                <div class="Child_other">
                   <div class="oneChild_sales" v-if="datas.content_list.includes('7')">销量 8888</div>
                  <div class="twoChild_line">
                    <div class="posRed" style="width:40%;border-radius:10px;">仅剩254件</div>
                  </div>
                  <div class="oneChild_activity"
                       v-if="!datas.content_list.includes('5') && datas.content_list.includes('6')">赠送xx积分
                  </div>
                  <div class="oneChild_activity" v-if="datas.content_list.includes('5')">赠送xx爱心值</div>
                </div>
                <!-- <div class="Child_member_price" v-if="datas.content_list.includes('4')">会员价 500.00</div> -->
                <div class="Child_price">
                  <div class="Child_now_price" v-if="datas.content_list.includes('3')"><em>￥</em> {{item.price || '888.00'}}</div>
                  <div class="Child_now_price" v-if="!datas.content_list.includes('3')"></div>
                  <div class="Child_buyBtn">
                    <div class="buyBtn" :class="`buyBtn_${datas.button_type}`">
                      <template v-if="datas.button_type == 1||datas.button_type==2">{{datas.button_title}}</template>
                      <i class="iconfont icon-gaiicon-" v-if="datas.button_type == 3||datas.button_type==4"></i>
                      <i class="iconfont icon-life-game-plus" v-if="datas.button_type == 5||datas.button_type==6"></i>
                    </div>
                  </div>
                </div>
                <div class="oneChild_original_price" v-if="datas.content_list.includes('2')">￥{{item.market_price || '8888.00'}}</div>
              </div>
            </div>
          </div>
        </template>

      </div>
    </div>

    <div class="u_goodslist" v-if="datas.preview_color && datas.style_set == '2'">
      <!-- 样式二 -->
      <div id="tab">
        <template v-if="datas.tablist&&datas.tablist.length > 0">
          <div class="nav nav-bgimage" >
            <div class="nav-li" :class="[item.active?'nav-selected':'']"
                v-for="(item, index) in datas.tablist" :key="index">
              <div class="nav-lis">
                {{item.name || item.component}}
              </div>
            </div>
          </div>
          <div class="tab-item" v-for="(child, index) in datas.list" :key="index">
            <div class="rush-item" v-show="datas.tablist[0].active && child.has_one_goods_limit_buy.start_time * 1000 <= nowData && child.has_one_goods_limit_buy.end_time * 1000 >= nowData">
              <div class="flex-j-sb top-time flex-a-c ">
                <div class="flex-a-c ">
                  <div style="color:#333;">X月X日{{datas.diy_name}}</div>
                  <i class="iconfont icon-ht_qd_miaosha"></i>
                </div>
                <div class="s-12" style="color: #999;">距离结束 XX：XX：XX</div>
              </div>

              <div class="flex rush-good" style="flex-direction:column;">
                <img :src="child.thumb" alt="">
                <div class="line-clamp-2 s-15" style="margin-top:8px;color: #000;">{{child.title}}</div>
                <div style="width: 65%;">
                  <div class="twoChild_line" style="height: 6px;">
                    <div class="posRed" style="width:40%;border-radius:10px;"></div>
                  </div>
                </div>
                <div class="flex-a-c flex-j-sb" style="margin-top:8px;">
                  <div class="price s-15"><small class="s-12">￥</small>{{child.price}}<small v-show="Number(child.market_price)>0" style="text-decoration:line-through;color: #999;font-size:12px;">￥{{child.market_price}}</small></div>
                  <div class="btn s-13">{{datas.button_title}}</div>
                </div>
              </div>
            </div>

            <div class="rush-item" v-show="datas.tablist[1].active && child.has_one_goods_limit_buy.start_time * 1000 > nowData">
              <div class="flex-j-sb top-time flex-a-c ">
                <div class="flex-a-c ">
                  <div style="color:#333;">X月X日{{datas.diy_name}}</div>
                  <i class="iconfont icon-ht_qd_miaosha"></i>
                </div>
                <div class="s-12" style="color: #999;">距离结束 XX：XX：XX</div>
              </div>

              <div class="flex rush-good" style="flex-direction:column;">
                <img :src="child.thumb" alt="">
                <div class="line-clamp-2 s-15" style="margin-top:8px;color: #000;">{{child.title}}</div>
                <div style="width: 65%;">
                  <div class="twoChild_line" style="height: 6px;">
                    <div class="posRed" style="width:40%;border-radius:10px;"></div>
                  </div>
                </div>
                <div class="flex-a-c flex-j-sb" style="margin-top:8px;">
                  <div class="price s-15"><small class="s-12">￥</small>{{child.price}}<small v-show="Number(child.market_price)>0" style="text-decoration:line-through;color: #999;font-size:12px;">￥{{child.market_price}}</small></div>
                  <div class="btn s-13">{{datas.button_title}}</div>
                </div>
              </div>
            </div>
            
            <div v-if="datas.list.length <= 0" style="padding: 15px;text-align: center">
              暂无设置限时购活动
            </div>
          </div>
        </template>
        

      </div>
    </div>

  </div>
</template>

<script>
	import emptyImage from "@/resource/images/image.png";
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
				padding_top,
				padding_bottom,
				padding_left,
				padding_right,
				item_radius,
				show_shadow,
				show_border,
				time_color,
				border_color,
				button_bg_color,
				button_color,
        tabs_active_color,
        tabs_color,
        progress_color,
        current_price_color
			} = this.datas;

			return `
        .component-${this.id} .u_goodslist{
            background-color: ${preview_color};
            padding-top: ${padding_top}px;
            padding-bottom: ${padding_bottom}px;
            padding-left: ${padding_left}px;
            padding-right: ${padding_right}px;
        }

        .component-${this.id} .u_goodslist .Child_buyBtn {
            color: ${button_color}
        }

        .component-${this.id} .u_goodslist .buyBtn_1 {
            background-color: ${button_bg_color};
        }

        .component-${this.id} .u_goodslist .Child_buyBtn .buyBtn_2,
        .component-${this.id} .u_goodslist .Child_buyBtn .buyBtn_4,
        .component-${this.id} .u_goodslist .Child_buyBtn .buyBtn_6 {
            border: solid 0.5px ${button_bg_color};
            color: ${button_bg_color};
        }

        .component-${this.id} .u_goodslist .buyBtn_3,
        .component-${this.id} .u_goodslist .buyBtn_5,
        .component-${this.id} .u_goodslist .tab-item .btn {
            color: ${button_color};
            background-color: ${button_bg_color};
        }

        .component-${this.id} .u_goodslist .buyBtn_4, .component-${this.id} .u_goodslist .buyBtn_6 {
            color: ${button_color};
            border: solid 0.5px ${button_color};
        }

        .component-${this.id} .u_goodslist_two_child, .component-${this.id} .u_goodslist_three_child, .component-${this.id} .u_goodslist_four_child, .component-${this.id} .u_goodslist_one_child {
            border-radius: ${item_radius}px;
        }

        .component-${this.id} .u_goodslist .Failure {
            border-radius: 0;
        }

        .component-${this.id} .u_goodslist_one_child .Failure {
            border-radius: 0;
        }

        .component-${this.id} .u_goodslist_two_child.big, .component-${this.id} .u_goodslist_one_child  {
            border: ${show_border?'1':'0'}px solid ${border_color};
            box-shadow: ${show_shadow?'1':'0'}px ${show_shadow?'1':'0'}px ${show_shadow?'5':'0'}px ${border_color};
        }

        .component-${this.id} .u_goodslist_one_child .oneChild_right {
            border-radius: 0 ${item_radius}px ${item_radius}px 0;
        }

        .component-${this.id} .time-box div{
            color: ${time_color};
        }

        .component-${this.id}  .nav-bgimage{
            color: ${tabs_color};
        }

        .component-${this.id}  .nav-bgimage .nav-selected{
            color: ${tabs_active_color};
            border-bottom: 2px solid ${tabs_active_color};
        }

        .component-${this.id} .tab-item .twoChild_line .posRed{
            background-color: ${progress_color};
        }

        .component-${this.id} .tab-item .icon-ht_qd_miaosha {
          color: ${preview_color};
        }
        .component-${this.id} .tab-item .price {
          color: ${current_price_color};
        }
        
    `;
		}
	};

	export default {
		data() {
			return {
				emptyImage,
        nowData: new Date().getTime()
			};
		},
		props: ['id', 'datas', 'styles', 'languages'],
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
			env() {
				return this.$store.state.page.env;
			},
		},

		methods: {},

		mounted() {
			this.$emit('loaded');
		}
	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    display: flex;
    justify-content: center;
    width: 375px;

    ul {
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      margin: 12/37.5rem 12/37.5rem 3/37.5rem;
      padding: 0;
      width: 100%;

    }
  }

  .u_goodslist {
    /*padding: 0 12px;*/
    width: 100%;
    .Failure {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      .Failure_text {
        width: 90px;
        height: 90px;
        background-color: #797979;
        border-radius: 100%;
        color: #fff;
        font-size: 20px;
        line-height: 90px;
        text-align: center;
      }
    }
    .u_goodslist_one {
      .u_goodslist_one_child {
        width: 100%;
        padding: 7px 10px;
        display: flex;
        position: relative;
        margin-bottom: 10px;
        background: #ffffff;
        .failure_cover {
          width: 35%;
        }
        .oneChild_left {
          width: 35%;
          height: 124px;
          overflow: hidden;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .oneChild_right {
          flex: 1;
          padding-left: 8px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background-color: white;
          padding-right: 4px;
          .oneChild_r_flextop {
            margin-top: 4px;
            margin-bottom: 5px;
          }
          .oneChild_r_flexbottom {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            margin-bottom: 4px;
          }
        }
      }
    }
    .u_goodslist_two {
      .u_goodslist_two_child {
        width: 100%;
        min-height: 300px;
        overflow: hidden;
        position: relative;
        margin: 0 auto 10px;
        .goodsImg {
          width: 100%;
          /*height: 350px;*/
          overflow: hidden;
        }
        .twoChild_bottom {
          position: absolute;
          width: 100%;
          background: rgba(0, 0, 0, 0.6);
          left: 0;
          bottom: 0;
          color: #fff;
          padding: 10px;
          .Child_member_price {
            margin-top: 10px;
          }
          .oneChild_original_price {
            color: #fff;
            font-weight: 400;
          }
          .buyBtn_2, .buyBtn_4, .buyBtn_6 {
            /*border-color: #fff;*/
            /*color: #fff;*/
          }
          .twoChild_top {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            div{
              width: 19px;
              height: 19px;
              border-radius: 5px;
              background: #ffffff;
              text-align: center;
              line-height: 19px;
              font-size: 12px;
              /*color: #ff2c29;*/
            }
          }
        }
      }
    }
    .u_goodslist_three {
      justify-content: space-between;
    }
    .u_goodslist_three, .u_goodslist_four {
      display: flex;
      flex-wrap: wrap;
      .u_goodslist_three_child, .u_goodslist_four_child {
        width: 50%;
        height: 50%;
        padding: 0 5px;
        margin: 5px 0;
        overflow: hidden;
        position: relative;
        .threeChild_top {
          width: 100%;
          height: 187px;
          overflow: hidden;
          position: relative;
          .goodsImg {
            width: 100%;
            height: 100%;
          }

        }
        .threeChild_b {
          background-color: white;
          padding: 6px 4px;
          .Child_other {
            margin-top: 2px;
            margin-bottom: 8px;
          }
        }
      }
      .u_goodslist_three_child .failure_cover {
        height: 187px;
        width: 95%;
        margin: 0 5px;
      }
      .u_goodslist_four_child .failure_cover {
        height: 112px;
        width: 92%;
        margin: 0 5px;
        .Failure_text {
          width: 60px;
          height: 60px;
          font-size: 14px;
          line-height: 60px;
        }
      }
      .u_goodslist_three_child .Failure {
        width: 95%;
        margin: 0 5px;
      }
      .u_goodslist_four_child .Failure {
        width: 93%;
        margin: 0 5px;
      }
    }
    .u_goodslist_four .Child_other {
      margin-bottom: 4px !important;
    }
    .u_goodslist_four_child {
      width: 33.33% !important;
      /*margin-right: 10px;*/
      .threeChild_top {
        width: 100% !important;
        height: 112px !important;
      }
      .Child_price, .Child_now_price {
        height: 20px;
        line-height: 20px;
      }
      .Child_buyBtn {
        .buyBtn {
          height: 20px;
          line-height: 20px;
        }
        .buyBtn_3, .buyBtn_4, .buyBtn_5, .buyBtn_6 {
          width: 20px;
        }
      }
    }
    .u_goodslist_four_child:nth-child(3n) {
      margin-right: 0px;
    }
    .u_goodslist_five {
      flex-wrap: nowrap;
      justify-content: flex-start;

      .u_goodslist_five_child {
        flex-shrink: 0;
        position: relative;
      }
    }
    .good_Attributes {
      position: absolute;
      top: 4px;
      left: 4px;
      display: flex;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .Child_title {
      font-size: 14px;
      line-height: 20px;
      height: 40px;
      color: #000;
      font-weight: bold;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .Child_other {
      display: flex;
      margin-top: 5px;
      margin-bottom: 5px;
      font-size: 12px;
      flex-wrap: wrap;
      .oneChild_sales {
        color: #666;
        margin-right: 14px;
      }
      .oneChild_activity {
        color: #3b3b3b;
      }
    }
    .Child_member_price {
      color: #ff2c29;
      height: 12px;
      line-height: 12px;
      font-size: 12px;
    }
    .Child_price {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // height: 26px;
      line-height: 26px;
      .Child_now_price {
        color: #ff2c29;
        font-weight: bold;
        font-size: 16px;
        em {
          font-size: 12px;
        }
      }

    }
    .oneChild_original_price {
      text-decoration: line-through;
      color: #999999;
      height: 12px;
      line-height: 12px;
      font-size: 12px;
    }
    .Child_buyBtn {
      text-align: center;
      font-weight: bold;
      /*color: #fff;*/
      .buyBtn {
        height: 26px;
        border-radius: 13.5px;
      }
      .buyBtn_1 {
        width: 76px;
        /*background-color: #3b3b3b;*/
      }
      .buyBtn_2 {
        width: 76px;
        /*border: solid 0.5px #363636;*/
        /*color: #363636;*/
      }
      .buyBtn_3, .buyBtn_4, .buyBtn_5, .buyBtn_6 {
        border-radius: 100%;
        width: 26px;
        i {
          font-size: 12px;
          font-weight: 400;
        }
      }
      .buyBtn_3, .buyBtn_5 {
        /*color: #fff;*/
        /*background-color: #3b3b3b;*/
      }
      .buyBtn_4, .buyBtn_6 {
        /*color: #3b3b3b;*/
        /*border: solid 0.5px #3b3b3b;*/
      }
      .buyBtn_5, .buyBtn_6 {
        i {
          font-size: 18px;
        }
      }
    }
    .u_goodslist_one .good_Attributes, .u_goodslist_three .good_Attributes {
      width: 60px;
      height: 24px;
    }
    .u_goodslist_two .good_Attributes {
      width: 100px;
      height: 40px;
    }
    .u_goodslist_four .good_Attributes, .u_goodslist_five .good_Attributes {
      width: 45px;
      height: 18px;
    }
  }
  .twoChild_line{
    width: 100%;
    height: 18px;
    background-color: #f1f1f1;
    border-radius: 9px;
    margin-top: 8px;
    text-align: left;
    color: #ffffff;
    line-height: 18px;
    font-size: 10px;
    position: relative;
    text-indent: 5px;
    .posRed{
      line-height: 16px;
      height:100%;
      background-color: #ff2c29;
      border-radius: 6px;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }
  }
  .twoChild_topPos{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    div{
      width: 18px;
      height: 17px;
      font-size: 11px;
      background-color: #ffffff;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      /*color: #ff2c29;*/
    }
  }
  .twoChild_topPosThr{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    div{
      width: 15px;
      height: 14px;
      font-size: 11px;
      background-color: #ffffff;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      /*color: #ff2c29;*/
    }
  }

  .u_goodslist .u_goodslist_six {
    .u_goodslist_two {
      clear: both;
    }
    .u_goodslist_three {
      display: block;
      width: 50%;
      float: left;
    }
    .u_goodslist_three_child {
      width: 100%;
      height: 100%;
    }
    .threeChild_b {
      .Child_title {
        min-height: 37px;
      }
    }
  }

  #tab {
  .nav {
    display: flex;
    align-items: center;
    height: 40px;
    white-space: nowrap;
    flex-wrap: nowrap;
    box-sizing: content-box;
    .nav-li {
      flex: 1;
      min-width: 20%;
      text-align: center;
      .nav-lis {
        display: inline-block;
        line-height: 40px;
      }
    }
  }

  .scroll {
    overflow-x: scroll;
  }
}

  .rush-item {
    margin-top: 8px;
    .top-time{
      padding: 8px;
      background: #fff;
      border-radius: 8px;
    }
    .icon-ht_qd_miaosha{
      text-align: center;
      color: #333;
      line-height: 21px;
      margin-left: 4px;
    }
    .rush-good{
      background: #fff;
      border-radius: 8px;
      margin: 8px 0 0 0;
      padding: 10px;
      img{
        width: 100%;
        border-radius: 4px;
      }
      .btn{
        padding: 0 12px;
        line-height: 22px;
        background: #000;
        color: #fff;
        border-radius: 12px;
      }
    }
  }

</style>
